<template>
        <div class="listBox">
       <template v-for=" (item) in ListData">
            <Item @deletedFn="deletedFn" :key="item.id" :ItemDAta="item" :checktoDo="checktoDo" @modifyOpen="modifyOpenFn"/>
       </template>
    </div>
</template>
<script>
import Item from './Item.vue'
export default {
    props:['ListData','checktoDo','todoDeleteItem','modifyOpen'],
    components:{Item},
    data(){
        return {
            
        }
    },
    
    methods:{
        deletedFn(ItemId){
            this.todoDeleteItem(ItemId)
        },
        modifyOpenFn(id) {
            this.modifyOpen(id)
        }

    }
}
</script>
<style scoped>
.listBox{
    width: calc(100% - 10px);
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto
}


</style>